<template>
    <div>
        <div class="title">
            <el-select clearable v-model="operatorId" placeholder="请选择代理商">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.operatorNm"
                        :value="item.operatorId"
                ></el-option>
            </el-select>
            <el-input maxlength="10" style="width:200px;margin-left:20px;" placeholder="搜索规则名称"
                      v-model="search"></el-input>
            <el-button @click="searchData" type="primary" style="margin-left:20px;">搜索</el-button>

        </div>
        <div class="data">
            <el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
                <el-table-column type="index" label="序号" align="center" min-width="50"></el-table-column>
                <el-table-column prop="changeName" label="规则名称" align="center" min-width="120"></el-table-column>
                <el-table-column prop="ruleTypeName" align="center" label="规则类型" min-width="80"></el-table-column>
                <el-table-column prop="realName" label="代理商姓名" align="center" min-width="120"></el-table-column>
                <el-table-column prop="isSysGive" :formatter="isSysGive" label="平台默认" align="center"
                                 min-width="120"></el-table-column>
                <el-table-column prop="isGive" :formatter="isGive" label="代理商默认" align="center"
                                 min-width="120"></el-table-column>
                <el-table-column prop="createtime" label="创建时间" align="center" min-width="120"></el-table-column>
                <el-table-column label="操作" align="center" min-width="180">
                    <template slot-scope="scope">
                        <i v-if="scope.row.isSysGive!=1" style="cursor: pointer;" @click="editHandler(scope.row)"
                           class="el-icon-edit"></i>
                        <i style="cursor: pointer;" @click="
            (scope.row)" class="el-icon-delete"></i>
                        <el-link @click="price(scope.row)">配置价格</el-link>
                        <el-link @click="copyHandler(scope.row)">复制规则</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="total"
            ></el-pagination>
        </div>
        <el-dialog title="复制规则" :visible.sync="dialogVisibleCopy" width="40%">
            <el-form ref="form" :model="formDataCopy" label-width="150px" :rules="formRule">
                <el-form-item class="nav-form-item" label="规则名称" prop="changeName">
                    <el-input
                            maxlength="15"
                            v-model="formDataCopy.changeName"
                            style="width:300px;"
                            placeholder="请输入规则名称"
                            clearable
                    />
                </el-form-item>

                <el-form-item class="nav-form-item" label="所属代理商" prop="userID">
                    <el-select clearable v-model="formDataCopy.userId" placeholder="所属代理商">
                        <el-option
                                v-for="item in agentData"
                                :label="item.operatorNm"
                                :value="item.operatorId"
                        ></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleCopy = false">取 消</el-button>
        <el-button type="primary" @click="copyConfimHandler">确 定</el-button>
      </span>
        </el-dialog>

        <el-dialog title="新增" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :model="formData" label-width="150px" :rules="formRule">
                <el-form-item class="nav-form-item" label="规则名称" prop="changeName">
                    <el-input
                            maxlength="15"
                            v-model="formData.changeName"
                            style="width:300px;"
                            placeholder="请输入规则名称"
                            clearable
                    />
                </el-form-item>

                <el-form-item class="nav-form-item" label="规则类型" prop="changeName">
                    <!-- <el-input v-model="formData.ruleType" style="width:300px;" placeholder="请输入电话" clearable /> -->
                    <el-select v-model="formData.ruleType" placeholder="请选择规则类型">
                        <el-option
                                v-for="item in ruleTypeList"
                                :key="item.value"
                                :label="item.codeName"
                                :value="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :style="style" class="nav-form-item" label="所属代理商" prop="userID">
                    <el-select clearable v-model="formData.userId" placeholder="所属代理商">
                        <el-option
                                v-for="item in agentData"
                                :label="item.operatorNm"
                                :value="item.operatorId"
                        ></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confimHandler">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    // import { addCard, lossCard, editCard } from '@/api/card'
    import {getRuleList, addRule, editeRule, deleteRule, copyRule} from '@/api/rule'
    import {getCodesByParent} from '@/api/common'
    import {getDataScopeList} from '@/api/user'
    import {getToken} from '@/utils/auth'
    import {getOperatorSelect} from '@/api/operator'

    export default {
        data() {
            return {
                dialogVisible: false,
                dialogVisibleCopy: false,
                operatorId: '',
                date: '',
                style: '',
                isAdd: true,
                search: '',
                tableData: [],
                loading: true,
                chargeTypeList: [],
                ruleTypeList: [],
                formData: {
                    cardNo: '',
                    mobile: '',
                    sum: 0,
                    chargeType: '',
                    ruleType: '',
                    changeName: '',
                    isGive: '',
                    isSysGive: "",
                    userId: ""
                },
                formDataCopy: {
                    id: "",
                    changeName: "",
                    userId: ""
                },
                total: 0,
                page: 1,
                pageSize: 10,
                options: [],
                formRule: {
                    changeName: [
                        {required: true, message: '请输入必填项', trigger: 'blur'}
                    ]
                },
                agentData: []
            }
        },
        created() {
            this.getDataList()
            this.getDataScopeList()
            this.getCodesByParent()
            this.getRuleTypeList()
            this.getAgentList()
        },
        methods: {
            handleCurrentChange(val) {
                this.page = val
                this.getDataList()
            },
            isGive(row) {
                if (row.isGive == 1) {
                    return '默认'
                } else {
                    return '否'
                }
            },
            userNm(row) {
                if (row.userNm) {
                    return row.userNm
                } else {
                    return '-'
                }
            },
            isSysGive(row) {
                if (row.isSysGive == 1) {
                    return '默认'
                } else {
                    return '否'
                }
            },
            price(row) {
                this.$router.push({
                    path: '/rules/price',
                    query: {
                        id: row.id
                    }
                })
            },
            getRuleTypeList() {
                let param = {
                    parentCode: 10
                }
                getCodesByParent(param).then(res => {
                    if (res.data && res.data.length > 0) {
                        this.ruleTypeList = [...res.data]
                    }
                })
            },
            getAgentList() {
                getOperatorSelect().then(res => {
                    this.agentData = [...res.data]
                })
            },
            getCodesByParent() {
                let param = {
                    parentCode: 3
                }
                getCodesByParent(param).then(res => {
                    if (res.data && res.data.length > 0) {
                        this.chargeTypeList = [...res.data]
                    }
                })
            },
            getDataScopeList() {
                getDataScopeList().then(res => {
                    if (res.data && res.data.length > 0) {
                        this.options = [...res.data]
                    }
                })
            },
            searchData() {
                this.page = 1
                this.getDataList()
            },
            getDataList() {
                this.loading = true
                let param = {
                    userId: this.operatorId,
                    ruleNm: this.search,
                    pageNo: this.page,
                    pageSize: this.pageSize
                }
                getRuleList(param).then(res => {
                    if (res.data.records) {
                        this.tableData = [...res.data.records]
                        this.total = res.data.total
                    }

                    this.loading = false
                })
            },
            addHandler() {
                this.isAdd = true
                this.dialogVisible = true
                this.formData = {}
            },
            copyConfimHandler() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.copyRule()
                    }
                })
            },
            confimHandler() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.isAdd) {
                            this.addRule()
                        } else {
                            this.editCard()
                        }
                    }
                })
            },
            copyHandler(row) {
                this.isAdd = false
                this.formDataCopy.changeName = row.changeName
                this.formDataCopy.id = row.id
                this.dialogVisibleCopy = true
            },
            editHandler(row) {
                this.isAdd = false
                this.formData.changeName = row.changeName
                this.formData.ruleType = row.ruleType
                this.formData.chargeType = row.chargeType
                this.formData.id = row.id
                if (row.isSysGive == 1) {
                    this.formData.userId = null
                    this.style = "display:none"
                }
                this.dialogVisible = true
            },
            copyRule() {
                copyRule(this.formDataCopy).then(res => {
                    if (res.message.code == 0) {
                        this.$message({
                            message: '复制成功',
                            type: 'success'
                        })
                        this.dialogVisibleCopy = false
                        this.getDataList()
                    } else {
                        this.$message.error(res.message.message)
                    }
                })
            },
            editCard() {
                editeRule(this.formData).then(res => {
                    if (res.message.code == 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                        this.dialogVisible = false
                        this.getDataList()
                    } else {
                        this.$message.error(res.message.message)
                    }
                })
            },
            addRule() {
                if (this.formData.isGive === this.formData.isSysGive) {
                    if (this.formData.isGive === 1) {
                        this.$message.error('不允许同时为代理商和系统规则哦')
                        return false;
                    }
                }
                addRule(this.formData).then(res => {
                    if (res.message.code == 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                        this.dialogVisible = false
                        this.getDataList()
                    } else {
                        this.$message.error(res.message.message)
                    }
                })
            },
            deteteHandlet(row) {
                this.$confirm('确定删除所选项吗?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        id: row.id
                    }
                    deleteRule(param).then(res => {
                        if (res.message.code == 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.getDataList()
                        } else {
                            this.$message.error(res.message.message)
                        }
                    })
                })
            }
        }
    }
</script>
<style scoped>
    .title {
        margin-left: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
    }

    .data {
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 10px;
    }
</style>
